/**
* Created by wl
* 项目管理>持有中-详情页-财务数据-编辑财务预期信息
*/
<template>
    <div>
        <div class="ca-title">
            <h3>财务预期</h3>
            <div class="el-right" v-show="showBtn">
                <el-button type="primary" @click="save" size="small">保存</el-button>
                <el-button @click="close" size="small">取消</el-button>
            </div>
        </div>
        <el-form ref="topManagerForm" :model="expectationInfo">
            <table class="ca-table ca-m-t-15">
                <tr>
                    <th>时间</th>
                    <th>收入（万元）</th>
                    <th>收入完成度</th>
                    <th>利润（万元）</th>
                    <th>利润完成度</th>
                    <th><i class="el-icon-circle-plus-outline el-size" @click="addExecutive"></i></th>  
                </tr>
                <tr v-for="(item, index) in expectationInfo.executivesList" :key="index">
                    <td >
                        <el-form-item>
                            <el-date-picker
                                align="right"
                                type="year"
                                placeholder="选择年"
                                v-model="item.particularYear">
                            </el-date-picker>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item
                            :prop="'executivesList.'+index+'.income'"
                            :rules="[{ validator: validateNumber, trigger: 'blur' }]"
                        >
                            <el-input type="number" v-model="item.income"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item
                            :prop="'executivesList.'+index+'.incomeProportion'"
                            :rules="[{ validator: validatePercentage, trigger: 'blur' }]">
                            <el-input type="number" v-model="item.incomeProportion"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item
                            :prop="'executivesList.'+index+'.profit'"
                            :rules="[{ validator: validateNumber, trigger: 'blur' }]">
                            <el-input type="number" v-model="item.profit"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item
                            :prop="'executivesList.'+index+'.profitProportion'"
                            :rules="[{ validator: validatePercentage, trigger: 'blur' }]">
                            <el-input type="number" v-model="item.profitProportion"></el-input>
                        </el-form-item>
                    </td>
                    <td class="el-mid" @click="delExecutive(index)">删除</td>
                </tr>
            </table>
        </el-form>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                value: '',
                sex: ['男', '女'],
                addInfo: {
                    particularYear: '', //年份
                    income: '--', //收入（万元)
                    incomeProportion: '--', //收入完成度
                    profit: '--', //利润（万元) ,
                    profitProportion: '--', //利润完成度
                },
                expectationInfo: {
                    executivesList: [], //信息列表
                },
            }
        },
        watch: {
        },
        props: {
            showBtn: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            // 验证数字小数点前十后六
            validateNumber(rule, value, callback) {
                var reg = /^\d{1,10}(\.\d{1,6})?$/;
                if (value && !reg.test(value)) {
                    callback(new Error('请输入正确的数字范围'));
                } else {
                    callback();
                }
            },
            // 验证百分比
            validatePercentage(rule, value, callback) {
                var reg = /^-?(100|(([1-9]\d|\d)(\.\d{1,2})?))$/;
                if (value && !reg.test(value)) {
                    callback(new Error('请输入正确的百分比范围'));
                } else {
                    callback();
                }
            },
            close() {
                this.$emit('close')
            },
            save() {
                this.$refs.topManagerForm.validate((valid) => {
                    if (valid) {
                        let query = {
                            itemHoldFinanceExpects: this.expectationInfo.executivesList,
                            itemId: this.$route.params.itemId
                        }
                        apiHttp(api.EDIT_EXPECT, query).then(ret => {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    message: '数据添加成功！',
                                    type: 'success',
                                    center: true
                                });
                                this.$emit('save')
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            getInfo() {
                apiHttp(api.CHECK_EXPECT, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        ret.data.itemHoldFinanceExpects.map( item => {
                            item.particularYear = new Date(item.particularYear)
                            this.expectationInfo.executivesList.push(item)
                        })
                    }
                })
            },
            // 添加
            addExecutive() {
                this.expectationInfo.executivesList.push(Object.assign({}, this.addInfo));
            },
            // 删除
            delExecutive(index) {
                let that = this
                this.$confirm('确定要删除此信息吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false,
                }).then(function () {
                    //删除操作
                    that.expectationInfo.executivesList.splice(index, 1);
                })
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-size {
    font-size: 30px;
}
.el-mid {
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}
.edit-btn {
    float: right;
    font-size: 30px;
    cursor: pointer;
    margin-left: 10px;
}
table td{
    padding: 11px 5px;
    box-sizing: border-box;
}
.el-form-item {
    margin-bottom: 0;
}
</style>